import React,{useState} from 'react'
import { useLocation,useNavigate } from "react-router-dom"
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';
import filterData from '../../../utils/filterData';
const { Sider } = Layout;
const siderMenu = [
    {
        key: "/nav/home",
        icon: <UserOutlined />,
        label: "首页"
    },
    {
        key: "shop-manage",
        icon: <LaptopOutlined />,
        label: "店铺管理",
        children: [
            {
                key: "/nav/shopList",
                label: "店铺列表",
                roles:["超级管理员","普通管理员"]
            },
            {
                key: "/nav/addShop",
                label: "添加店铺",
                roles:["超级管理员"]
            },
        ]
    },
    {
        key: "account-manage",
        icon: <NotificationOutlined />,
        label: "账号管理",
        children: [
            {
                key: "/nav/accountList",
                label: "账号列表",
                roles:["超级管理员","普通管理员"]
            },
            {
                key: "/nav/addAccount",
                label: "添加账号",
                roles:["超级管理员"]
            },
        ]
    }
]


export default function MySider() {
    const location = useLocation()
    const navigate = useNavigate()
    const [currentOpenKay,setCurrentOpenKay] = useState([location.state])
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    function changePage(parmas) {
        const [keyPath,subKey] = parmas.keyPath
        navigate(keyPath,{state:subKey})
    }
    function onOpenChange(params) {
        setCurrentOpenKay(params)
    }
    return (
        <Sider
            width={200}
            style={{
                background: colorBgContainer,
            }}
        >
            <Menu
                onClick={changePage}
                mode="inline"
                selectedKeys={[location.pathname]}
                openKeys={[ ...currentOpenKay]}
                style={{
                    height: '100%',
                    borderRight: 0,
                }}
                items={filterData(siderMenu)}
                onOpenChange={onOpenChange}
            />
        </Sider>
    )
}
